html {
  color: var(--color-outer-space);
  background-color: var(--color-wild-sand);
}

body {
  margin: 0;
  padding: 0;
  height: 100%;
}

h1:not([class]) {
  margin: 0;
  margin-bottom: 10px;
  font-family: var(--font-family-PT-Sans);
  font-weight: var(--font-weight-bold);
  font-size: 24px;
  line-height: 36px;
  color: var(--color-outer-space);
}

p:not([class]) {
  margin: 0;
  margin-bottom: 20px;
  font-family: var(--font-family-PT-Sans);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-medium);
  line-height: 22.5px;
  color: var(--color-outer-space);
}

a:not([class]) {
  color: #4077d6;
  font-family: var(--font-family-PT-Sans);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-medium);
  line-height: 22.5px;
}

img:not([class]) {
  max-width: 100%;
  margin-bottom: 20px;
  border-radius: 3px;
  object-fit: cover;
}

ul:not([class]) {
  padding-left: 20px;
  margin-bottom: 20px;
  list-style-type: none;
}

ul li:not([class]) {
  display: flex;
  align-items: flex-start;
  margin-bottom: 10px;
  font-family: var(--font-family-PT-Sans);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-medium);
  line-height: 22.5px;
}

ul li:not([class])::before {
  display: block;
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  margin: 9px 10px 0 0;
  content: "";
  background-color: #a1d5f6;
  border-radius: 50%;
}

blockquote:not([class]) {
  box-sizing: border-box;
  margin: 24px 0 20px;
  font-family: var(--font-family-PT-Sans);
  font-size: var(--font-size-medium);
  font-weight: var(--font-weight-regular);
  line-height: 22px;
  background-color: #f5f5f5;
  border-radius: 3px;
  border-left: 5px solid #a1d5f6;
  padding: 20px 25px;
}

ol:not([class]) {
  counter-reset: item;
  padding-left: 20px;
  margin: 0;
  margin-bottom: 11px;
}

ol li:not([class]) {
  box-sizing: border-box;
  display: block;
  position: relative;

  margin: 11px 0;
  padding-left: 23px;

  text-align: start;
  font-family: var(--font-family-PT-Sans);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-medium);
  line-height: 22.5px;
}

ol li:not([class])::before {
  position: absolute;
  content: counters(item, ".") ".";
  counter-increment: item;
  left: 0;
  color: #a1d5f6;
}

ol li > ol li:not([class])::before {
  position: absolute;
  content: counters(item, ".") "";
  counter-increment: item;
  left: -7px;
  color: #a1d5f6;
}

ol li:not([class]) > ol {
  margin-top: 10px;
  padding-left: 27px;
}

ol li ol li:not([class]):last-child {
  margin-bottom: 0;
}

h3:not([class]) {
  margin: 40px 0 10px 0;
  font-family: var(--font-family-PT-Sans);
  font-weight: var(--font-weight-bold);
  font-size: 18px;
  line-height: 27px;
  color: var(--color-outer-space);
}

@media screen and (min-width: 768px) and (max-width: 1279px) {
  img:not([class]) {
    height: 434px;
    margin-bottom: 17px;
  }

  p:not([class]) {
    margin-bottom: 21px;
  }

  ul li:not([class]) {
    margin-bottom: 11px;
  }

  blockquote:not([class]) {
    margin: 23px 0 20px;
  }
}

@media screen and (max-width: 767px) {
  .container {
    width: 375px;
    margin: 0;
    margin-left: -20px;
  }

  .title {
    margin: 10px 0 11px;
  }

  img:not([class]) {
    height: 220px;
    margin-top: 2px;
    margin-bottom: 17px;
  }

  ul li:not([class]) {
    margin-bottom: 12px;
  }

  ul li:not([class])::before {
    margin-top: 10px;
  }

  ul li:not([class]):last-child {
    margin-bottom: 22px;
  }

  blockquote:not([class]) {
    padding: 20px 25px 25px;
  }

  ol:not([class]) {
    padding-left: 20px;
  }

  ol li:not([class]) {
    padding-left: 22px;
  }

  ol li:not([class]) > ol {
    margin-top: 12px;
  }

  ol li:not([class]):last-child {
    margin-bottom: -6px;
  }
}
